<template>
  <view>
    <view class="pos-r" @click="onClick">
      <view class="al-c pa-2" v-if="onlyOne">
        <q-img :src="onlyOne.cover" size="54" :radius="8"></q-img>
        <view class="ml-2">
          <view class="u-line-1">{{ onlyOne.name }}</view>
          <view class="mt-1 fz-13 op-5">
            <span>￥{{ onlyOne.price }}</span>
          </view>
        </view>
      </view>
      <scroll-view v-else scroll-x class="w100p">
        <view class="d-flex gap-2 pa-2">
          <view class="pos-r" v-for="it in list" :key="it.id">
            <q-img :src="it.cover" size="60" :radius="8"></q-img>
            <view class="pos-a btm-0 left-0 pa-1 fw-b">
              <u-badge
                color="#f51"
                bg-color="#fffffd"
                :value="'×' + it.num"
              ></u-badge>
            </view>
          </view>
          <view style="width: 60px" class="shrink-0"></view>
        </view>
      </scroll-view>
      <view
        class="pos-a right-0 top-0 h100p z-100 bg-cell d-center"
        style="width: 60px; opacity: 0.95"
      >
        <view class="fz-14"> 共{{ total }}件 </view>
      </view>
    </view>

    <hqs-popup v-model="showPop" title="商品详情" height="60vh">
      <view>
        <view
          class="d-flex py-3 px-4 u-border-bottom"
          v-for="it in list"
          :key="it.id"
        >
          <q-img :src="it.cover" size="54" :radius="8"></q-img>
          <view class="ml-2">
            <view>{{ it.name }}</view>
            <view class="mt-1 fz-13 op-5">
              <view>
                <span>单价：￥{{ it.price }}</span>
                <span class="del ml-2" v-if="it.price_old"
                  >￥{{ it.price_old }}</span
                >
              </view>
              <view>数量：{{ it.num }}</view>
            </view>
          </view>
          <view class="ml-auto">￥{{ (it.price * it.num).toFixed(2) }}</view>
        </view>
      </view>
      <view class="pa-3"></view>
      <u-safe-bottom />
    </hqs-popup>
  </view>
</template>

<script>
export default {
  props: {
    list: Array,
    total: Number,
    plain: Boolean,
  },
  computed: {
    onlyOne() {
      if (this.list.length == 1) return this.list[0];
      return null;
    },
  },
  data() {
    return {
      showPop: false,
    };
  },
  methods: {
    onClick() {
      if (this.plain) return;
      this.showPop = true;
    },
  },
};
</script>
